<template>
  <div class="tree-node">
    <div class="node-content">
      <!-- 节点输入区域 -->
      <div class="node-inputs">
        <el-input
          :model-value="node.label"
          @input="updateField('label', $event)"
          placeholder="参数名"
          class="input-field"
        />
        <span class="separator">=</span>
        <el-input
          :model-value="node.value"
          @input="updateField('value', $event)"
          placeholder="参数值"
          class="input-field"
        />
        <el-select
          :model-value="node.tagType"
          @change="updateField('tagType', $event)"
          placeholder="主题类型"
          clearable
          class="select-field"
        >
          <el-option value="primary">
            <el-tag type="primary">Default</el-tag>
          </el-option>
          <el-option label="Success" value="success">
            <el-tag type="success">Success</el-tag>
          </el-option>
          <el-option label="Info" value="info">
            <el-tag type="info">Info</el-tag>
          </el-option>
          <el-option label="Warning" value="warning">
            <el-tag type="warning">Warning</el-tag>
          </el-option>
          <el-option label="Danger" value="danger">
            <el-tag type="danger">Danger</el-tag>
          </el-option>
        </el-select>
      </div>

      <!-- 操作按钮区域 -->
      <div class="node-actions">
        <el-button
          v-if="isTree"
          @click="$emit('add-child', node.id)"
          type="primary"
          circle
          plain
        >
          <el-icon><BottomLeft /></el-icon>
        </el-button>
        <el-button
          @click="$emit('add-sibling', node.id)"
          type="success"
          circle
          plain
        >
          <el-icon><Plus /></el-icon>
        </el-button>
        <el-button
          @click="$emit('remove-node', node.id)"
          type="danger"
          :icon="Delete"
          circle
          plain
        />

        <!-- 展开/收起按钮 -->
        <el-button
          v-if="hasChildren"
          @click="toggleExpanded"
          :icon="isExpanded ? ArrowDown : ArrowRight"
          circle
          plain
        />
      </div>
    </div>

    <!-- 子节点区域 -->
    <div v-if="hasChildren && isExpanded" class="children-container">
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :level="level + 1"
        @update-node="$emit('update-node', $event, $event)"
        @add-child="$emit('add-child', $event)"
        @add-sibling="$emit('add-sibling', $event)"
        @remove-node="$emit('remove-node', $event)"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import {
  Plus,
  DocumentAdd,
  Delete,
  ArrowDown,
  ArrowRight,
} from '@element-plus/icons-vue';

// 定义Props
const props = defineProps({
  node: {
    type: Object,
    required: true,
  },
  isTree: {
    type: Boolean,
    default: true,
  },
  level: {
    type: Number,
    default: 0,
  },
});

// 定义Emits
const emit = defineEmits([
  'update-node',
  'add-child',
  'add-sibling',
  'remove-node',
]);

// 展开状态
const isExpanded = ref(true);

// 计算属性
const hasChildren = computed(() => {
  return props.node.children && props.node.children.length > 0;
});

// 更新字段
const updateField = (field, value) => {
  emit('update-node', props.node.id, { [field]: value });
};

// 切换展开状态
const toggleExpanded = () => {
  isExpanded.value = !isExpanded.value;
};
</script>

<style lang="scss" scoped>
.tree-node {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  margin-bottom: 8px;
  .node-content {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    padding: 5px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fafafa;

    &:hover {
      background-color: #f5f7fa;
    }
  }

  .node-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;

    .input-field {
      min-width: 80px;
      width: 160px;
    }

    .select-field {
      min-width: 80px;
      width: 160px;
    }

    .separator {
      color: #909399;
      font-weight: bold;
    }
  }

  .node-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .children-container {
    margin-top: 8px;
    padding-left: 20px; /* This padding is for the vertical line, not indentation */
    border-left: 2px solid #e4e7ed;
  }
}

/* 移除不同级别颜色区分 */
</style>
